<template>
  <div id="components-layout-demo-basic">
    <!--网站辅助导航-->
    <a-row type="flex" justify="start" align="top" :class="header.helperBarShowStatus">
      <a-col :span="24" id="helperHeader">
        <BlogHelperHeader></BlogHelperHeader>
      </a-col>
    </a-row>
    <!--网站主导航-->
    <a-affix :offsetTop="0">
      <a-row class="mainHeaderBootm animated slideInDown" id="mainHeader"
             :style="{background: 'white',display: mainHeaderShowStatus}">
        <a-col :span="4" :offset="2">
          <a @click="toBlogIndexPage()">
            <BlogLogo></BlogLogo>
            <!--<LogoSvg></LogoSvg>-->
          </a>
        </a-col>
        <a-col :span="12">
          <div v-if="scroll.direction==='down'" style="text-align: left;padding-left: 10px;">
            <h1 style="padding: 6px 0;margin: 0 0;">{{ blog.title }}</h1>
          </div>
          <BlogMainHeader v-else class="animated"></BlogMainHeader>
        </a-col>
        <a-col :span="4">
          <div style="padding-top: 12px;">
            <a-button type="default" shape="round" icon="like" @click="blogAgreeClick()">点赞({{ blog.starCount }})
            </a-button>
            <a-badge :count="blog===null?0:blog.commentCount">
              <a-button type="default" shape="round" icon="message" @click="showDrawer">评论</a-button>
            </a-badge>
          </div>
        </a-col>
      </a-row>
    </a-affix>
    <!--网站主题路由部分-->
    <!--margin样式去除guteer导致的左右滚动条问题-->
    <a-row type="flex" justify="center" :gutter="16" style="margin: 0 0;">
      <a-col :span="16" id="blogContainer">
        <router-view></router-view>
      </a-col>
      <a-col :span="5">
        <a-affix :offsetTop="70" id="outline-container" class="outline-container"
                 :style="blogOutlineStyle" @change="outlineAffixChange">
          <a-divider orientation="left"><strong>博文目录</strong></a-divider>
          <BlogOutline mode="inline"
                       :openKeys="openKeys"
                       :expandIcon="` `"
                       :selectedKeys="selectedKeys"
                       :menu="treeOutline"
                       class="animated fadeInUp"
          ></BlogOutline>
          <!--</a-layout-sider>-->

        </a-affix>
      </a-col>
    </a-row>
    <!--<router-view></router-view>-->
    <!--网站底部-->
    <a-row>
      <BlogFooter></BlogFooter>
    </a-row>
    <!--回到顶部-->
    <a-back-top/>

    <!--评论抽屉组件-->
    <a-drawer
      title="文明评论"
      :width="720"
      @close="onDrawerClose"
      :visible="commentDrawerVisible"
      :keyboard="true"
      :bodyStyle="{paddingBottom: '80px'}"
    >
      <BlogComment></BlogComment>
    </a-drawer>


    <!--登录弹框-->
    <a-modal
      :zIndex=9999
      :visible="loginVisible"
      @ok="loginOk"
      :confirmLoading="false"
      :footer="null"
      @cancel="loginCancel"
    >
      <Login :loginMode="`blog`"></Login>
    </a-modal>
  </div>
</template>

<style scoped>
.mainHeaderBootm {
  height: 60px;
  border-bottom: 2px solid #e8e8e8;
  box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2); /*阴影*/
}
</style>


<script>
import BlogCarousel from '@/components/Blog/BlogCarousel'
import BlogMainHeader from '@/components/Blog/BlogMainHeader'
import BlogHelperHeader from '@/components/Blog/BlogHelperHeader'
import BlogSearch from '@/components/Blog/BlogSearch'
import BlogFooter from '@/components/Blog/BlogFooter'
import BlogContent from '@/views/blog/BlogContent'
import BlogOutline from '@/components/Blog/BlogOutline'
import BlogComment from '@/views/blog/BlogComment'
import LogoSvg from '@/assets/blog-logo.svg?inline'
import { mapGetters, mapActions } from 'vuex'
import { blogAgreeAction } from '@/api/blog'
import Login from '@/views/user/Login'
import BlogLogo from '@/components/tools/BlogLogo'

export default {
  name: 'BlogDetailLayout',
  components: {
    BlogCarousel,
    BlogMainHeader,
    BlogHelperHeader,
    BlogSearch,
    BlogFooter,
    LogoSvg,
    BlogContent,
    BlogOutline,
    BlogComment,
    Login,
    BlogLogo
  },
  data() {
    return {
      scroll: {
        scrollTop: 0,
        helperHeaderHeight: 0,
        mianHeaderHeight: 0,
        direction: 'up'
      },
      header: {
        blogTitleShowStatus: 'mainHeaderBootm',
        blogCategoryShowStatus: 'mainHeaderBootm top-category',
        helperBarShowStatus: 'animated fadeInDown'
      },
      outlineClickCount: 0,
      mainHeaderShowStatus: 'block',
      commentDrawerVisible: false//评论抽屉是否可见
    }
  },
  computed: {
    ...mapGetters(['openKeys', 'selectedKeys', 'treeOutline', 'activeOpenKeysType', 'blog', 'loginVisible', 'userInfo']),
    blogOutlineStyle() {
      let calcHeight = window.screen.height - 80
      return {
        'overflow-y': 'auto', height: calcHeight+'px'
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.getScroll)
  },
  created() {
    this.debounceActiveOutline = _.debounce(this.activeOutline, 100)
  },
  methods: {
    ...mapActions(['loadBlogById']),
    outlineAffixChange(affixed) {
      // console.log('outline affixed is ', affixed)
      // if (affixed) {
      //   let outlineContainer = document.getElementById('outline-container').firstChild
      //   outlineContainer.style['overflow-y'] = 'auto'
      // }
    },
    loginCancel() {
      this.$store.dispatch('setLoginVisible', false)
    },
    loginOk(e) {
      setTimeout(() => {
        this.$store.dispatch('setLoginVisible', false)
      }, 2000)
    },
    // 点赞
    blogAgreeClick() {
      let blogId = this.$route.params.blogId
      blogAgreeAction(blogId).then((res) => {
        if (res.code === '200') {
          this.blog.starCount++
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    //博客首页
    toBlogIndexPage() {
      this.$router.push('/blog/index')
    },
    showDrawer() {
      let placeholder = `亲爱的${this.userInfo.userName}，快来发表你的评论包(*^__^*)……`
      this.$store.dispatch('setCommentReplyBody', { type: 'B_BLOG_COMMENT', obj: this.blog, placeholder })
      this.commentDrawerVisible = true
    },
    onDrawerClose() {
      this.commentDrawerVisible = false
    },
    activeOutline() {
      // 只要滚动，把事件发送给vuex，让博文目录激活菜单
      this.$store.dispatch('activeOutline', 'i want to active outline item.')
    },
    //监听滚动
    getScroll() {
      /*
      * 临界值：
      *       30：主菜单变成fixed布局
      *       30+55：向下滚动时隐藏主菜单，向上回滚时显示主菜单。
      * */
      let blogContainer = document.getElementById('blogContainer')
      if (!blogContainer) return
      let distance = blogContainer.getBoundingClientRect().top - this.scroll.scrollTop
      if (distance > 0) {
        this.scroll.direction = 'up'
      } else if (distance > 0 && distance <= 54) {
        this.scroll.direction = 'up'
      } else {
        this.scroll.direction = 'down'
      }
      this.scroll.scrollTop = blogContainer.getBoundingClientRect().top
      //‘activeOpenKeysType’是为了处理当点击目录时引起文档滚动，文档滚动有会触发`getScroll`函数，使得目录出现收缩不友好的现象
      // 'outlineClickCount' 是为了处理第一次点击目录时导致目录收缩问题。
      if (this.activeOpenKeysType === 'outline-click' && this.outlineClickCount === 0) {
        this.$store.dispatch('setActiveOpenKeysType', 'window-scroll')
        this.outlineClickCount++
      } else if (this.activeOpenKeysType === 'window-scroll' && this.outlineClickCount === 1) {
        this.outlineClickCount++
      } else if (this.activeOpenKeysType === 'outline-click' && this.outlineClickCount === 1) {
        this.outlineClickCount++
      } else if (this.activeOpenKeysType === 'outline-click' && this.outlineClickCount > 1) {
        this.outlineClickCount++
        this.$store.dispatch('setActiveOpenKeysType', 'window-scroll')
      } else {
        this.debounceActiveOutline('激活博文目录')
      }
    }
  }

}
</script>


<style scoped>
.top-category {
  top: -60px;
}

.blog-router-active {
  color: black;
}

.ant-back-top {
  right: 46px;
}

.detail-header {
  background: #FFFFFF;
  padding-bottom: 0;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-box-shadow: 0 1px 3px rgba(26, 26, 26, .15);
  -moz-box-shadow: 0 1px 3px rgba(26, 26, 26, .15);
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.15);
  position: fixed;
  width: 100%;
  z-index: 19930916;
  height: 60px !important;
  top: 0;
  transition: .5s ease all;
  -moz-transition: .5s ease all;
  -webkit-transition: .5s ease all;
  -o-transition: .5s ease all;
}

/*博客大纲样式*/
.outline-container >>> .ant-menu-submenu-selected {
  background: rgba(184, 184, 184, 0.2);
  color: black;
  font-weight: bold;
}

.outline-container >>> .ant-affix {
  overflow-y: auto;
}

.outline-container >>> .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background: rgba(184, 184, 184, 0.2);
}
</style>
